<template>
  <div>
    <!-- 三级分类 -->
    <el-card class="md-10">
      <CategorySelector :disabled="!isShow"></CategorySelector>
    </el-card>

    <el-card>
      <!-- 列表数据 -->
      <div v-if="isShow">
        <el-button type="primary" :icon="Plus" @click="goAddAttrList" class="md-10" :disabled="!categoryStore.category3Id"
          >添加属性</el-button
        >
        <!-- data -->
        <el-table border :data="attrInfoData">
          <el-table-column label="序号" type="index" width="80" align="center"> </el-table-column>
          <el-table-column label="属性名" width="160" prop="attrName"></el-table-column>
          <el-table-column label="属性值列表" prop="valueName">
            <template #default="{ row }">
              <el-tag v-for="item in row.attrValueList" type="success" :key="item.id" class="ml-5">{{ item.valueName }}</el-tag>
            </template>
          </el-table-column>

          <el-table-column label="操作" width="140">
            <template #default="{ row, $index }">
              <!-- 这里还需要两个点击事件 -->
              <el-button type="warning" size="small" :icon="Edit" @click="compileAttrInfo(row, $index)"></el-button>
              <!-- title: 提示信息
                   placement: 提示框出现在那个位置
                   cancel: 点击取消时触发
                   confirm: 点击确认时触发
              -->
              <el-popconfirm :title="`确定要删除${row.attrName}吗?`" placement="top" @confirm="deleteconfirm(row)">
                <template #reference>
                  <el-button type="danger" size="small" :icon="Delete"></el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 新增数据 -->
      <div v-if="!isShow">
        <el-form inline>
          <el-form-item label="属性名">
            <el-input v-model="attrInfoForm.attrName"></el-input>
          </el-form-item>
          <!-- 绑定对应的值并进行展示 -->
        </el-form>
        <div class="md-10">
          <el-button type="primary" @click="addAttrValueList" :disabled="!attrInfoForm.attrName">添加属性值</el-button>
          <el-button @click="goAddAttrList">取消</el-button>
        </div>

        <el-table border :data="attrInfoForm.attrValueList">
          <el-table-column label="序号" type="index" width="80" align="center"></el-table-column>
          <el-table-column label="属性名名称" prop="valueName">
            <template #default="{ row, $index }">
              <!-- 编辑状态 -->
              <el-input
                ref="InputForm"
                v-if="row.isDone"
                v-model="row.valueName"
                v-focus
                @blur="BlurInput(row, $index)"
              ></el-input>
              <div @click="showIsEdit(row)">
                <!-- 展示状态 -->
                <span v-if="!row.isDone">{{ row.valueName }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="80">
            <template #default="{ $index }">
              <!-- 这里还需要一个点击事件 -->
              <el-button type="danger" size="small" :icon="Delete" @click="deleteAttrValue($index)"></el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="mt-10">
          <el-button type="primary" @click="addAttrInfo" :disabled="!(attrInfoForm.attrName && attrInfoForm.attrValueList.length)"
            >保存</el-button
          >
          <el-button @click="goAddAttrList">取消</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
// 导入 图标
import { Delete, Edit, Plus } from '@element-plus/icons-vue'
// 导入监听属性 (watch)
import { watch, ref, onMounted } from 'vue'
// 导入 useCategoryStore 仓库
import useCategoryStore from '@/stores/categoryStore'
// 导入 api
import { attrInfoList, saveAttrInfo, deleteAttr } from '@/api/attr'
// 导入类型
import type { attrDataModel, attrValueListModel } from '@/api/attr'

import { ElMessage } from 'element-plus'
// 导入插件 实现数据的深浅拷贝
import { cloneDeep } from 'lodash'

// 获取store实例
const categoryStore = useCategoryStore()

// 声明一个状态
const isShow = ref(true)

// 获取input实例
const InputForm = ref<HTMLInputElement>()

// input输入框失焦事件
const BlurInput = (row: attrValueListModel, $index: number) => {
  // 判断在input框中输入的内容是否为空
  if (row.valueName) {
    // 修改状态 切换成 展示状态
    row.isDone = !row.isDone
  } else {
    // 提示用户并清除这个输入框
    ElMessage.error('输入的内容不能为空')
    // 调用删除按钮的操作
    deleteAttrValue($index)
  }

  // 去重
  const isRes = attrInfoForm.value.attrValueList.some((item, indexs) => {
    if ($index === indexs) {
      // 比对时去除自己
      return
    }

    return item.valueName === row.valueName
  })

  // 判断
  if (isRes) {
    ElMessage.error('输入的内容不能重复')
    // 调用删除按钮的操作
    deleteAttrValue($index)
  }
}

// 展示状态的点击事件
const showIsEdit = (row: attrValueListModel) => {
  // 修改状态,切换成编辑状态
  row.isDone = !row.isDone
  // console.log('触发') // 测试
}

// 点击实现展示和隐藏并重置表单数据
const goAddAttrList = () => {
  // 取反(修改状态)
  isShow.value = !isShow.value
  // 重置表单数据
  attrInfoForm.value = initAttrInfo()
}
// 初始化表单数据
const initAttrInfo = () => ({
  attrName: '',
  categoryId: undefined,
  categoryLevel: 3,
  attrValueList: []
})
// 收集表单数据
const attrInfoForm = ref<attrDataModel>(initAttrInfo())

// 当点击添加属性值按钮的时候,向表单数据新增一个对象数据
const addAttrValueList = () => {
  attrInfoForm.value.attrValueList.push({
    valueName: '',
    isDone: true
  })
  // console.log(InputForm)
  // 将状态修改: 展示输入框 el-input
  // isDone.value = !isDone.value
}

// 点击删除属性值按钮
const deleteAttrValue = (index: number) => {
  attrInfoForm.value.attrValueList.splice(index, 1)
}

// 当点击保存按钮的时候,发送请求,调用api
const addAttrInfo = async () => {
  // 组装表单数据
  attrInfoForm.value.categoryId = categoryStore.category3Id
  try {
    const res = await saveAttrInfo(attrInfoForm.value)
    // console.log(res)
    if (res.code === 200) {
      // 提示用户
      ElMessage.success('保存成功')
      // 修改状态并重置表单数据
      goAddAttrList()
      // 重新发起获取列表数据
      getAttrInfoList()
    }
  } catch (error) {
    // 提示
    ElMessage.error('保存失败,请重试')
  }
}
// 获取平台属性数据
const attrInfoData = ref<attrDataModel[]>([])

// 获取平台信息
const getAttrInfoList = async () => {
  // console.log('监听')
  // 监听到 category3Id 的改变之后
  // 发送请求,调用 api
  // 从 store 仓库中取出三个id值
  try {
    const { category1Id, category2Id, category3Id } = categoryStore
    const res = await attrInfoList(category1Id as number, category2Id as number, category3Id as number)
    // console.log(res)
    if (res.code === 200) {
      // 将数据存储起来
      attrInfoData.value = res.data
    }
  } catch (error) {
    ElMessage.error('获取平台属性列表失败,请重试')
  }
}
// 监听三级分类的id
watch(
  // 监听三级分类的id是否发生改变
  () => categoryStore.category3Id,
  (newVal) => {
    if (newVal) {
      // 发送请求
      getAttrInfoList()
    } else {
      // 清空数据
      attrInfoData.value = []
    }
  },
  // 开启深度监听,当发现路由跳转的时候,立即监听
  // 三级分类id的变化
  { immediate: true, deep: true }
)
// onMounted(() => {
//   console.log(isShow)
// })
// 编辑按钮回调
const compileAttrInfo = (row: attrDataModel, index: number) => {
  // console.log(row, index)
  // 展示新增数据模板
  goAddAttrList()
  // 回显数据
  attrInfoForm.value = cloneDeep(row)
}
// 气泡弹框的确认回调
const deleteconfirm = async (row: attrDataModel) => {
  console.log('确认')
  // 拿到需要删除的id
  // 发送请求调用api
  try {
    const res = await deleteAttr(row.id as number)
    // console.log(res) // 测试
    if (res.code === 200) {
      // 删除成功之后
      // 提示用户删除成功
      ElMessage.success('删除成功')
      // 重新发送请求拿到全部列表数据
      getAttrInfoList()
    }
  } catch (error) {
    // 提示
    ElMessage.error('删除失败,请重试')
  }
}
</script>

<style scoped></style>
